<template>
  <div class="matter" v-for="nl in nlist">
    <div class="pageTitle">
      <span>{{ nl[0]['型号'] }}</span>
    </div>
    <div class="wai">
      <div class="c">
        <span v-for="tl in titleList" :key="tl.id">{{ tl.memory }}</span>
      </div>
      <div class="cbig">
        <div class="c1">
          <span v-for="li in nl">{{ li['容量'] }}</span>
        </div>
        <div class="c2">
          <span v-for="li in nl">{{ li['全新'] > 500 ? li['全新'] : '/' }}</span>
        </div>
        <div class="c3">
          <span v-for="li in nl">{{ li['高保充新'] > 500 ? li['高保充新'] : '/' }}</span>
        </div>
        <div class="c4">
          <span v-for="li in nl">{{ li['靓机'] > 500 ? li['靓机'] : '/' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick } from 'vue';
import { ref } from 'vue';

const titleList = [{ id: 's1', memory: '容量', serial: 'kaset1' }, { id: 's2', memory: '全新', serial: 'kaset' }, { id: 's3', memory: '高保充新', serial: 'kaset' }, { id: 's4', memory: '靓机', serial: 'kaset' }]


async function getJson() {
  let include = [];
  let jsonData: any = {};

  // 苹果国行新机
  //Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例
  const newRes = await Promise.all([
    fetch(`http://xcs.whxcs.com:8088/yiping_json/new_苹果国行_1.json`), //fetch用于在JavaScript脚本里面发出HTTP请求
    fetch(`http://xcs.whxcs.com:8088/yiping_json/new_苹果国行_2.json`),
  ]);
  //fetch(`http://xcs.whxcs.com:8088/yiping_json/new_苹果国行_2.json`),
  // console.log(newRes); //这里到控制台的是两个对象

  const tempJsonData: any = {}; //在for循环之外创建一个空对象数组，可以让整个页面都能调用这个数组
  for (let i = 0; i < newRes.length; i++) {
    //遍历出刚刚获取的两个URL
    const data = await newRes[i].json();  // .json的作用是将json数据转换为json对象
    // console.log(data);
    Object.keys(data).forEach((key) => {
      //forEach遍历data的每一个值
      if (
        key.includes("phone") || //在遍历中的每一个键名时，找到为'phone'的就
        key.includes("Phone") ||
        key.includes("hone")
      ) {
        tempJsonData[key] = data[key]; //然后让之前创建的空数组，上面找到了多少个key就在空数组中遍历出来，然后遍历的值由data数组的key来
      }
    });
  }
  // console.log(tempJsonData);
  // 去重
  const newJsonData: any = []; //在遍历tempJsonData对象数组之外创一个新数组
  Object.keys(tempJsonData).forEach((key: any) => {
    const temp: any[] = []; //创建一个空数组
    newJsonData[key] = {}; //newJsonData的每一个key值都放入对象数组
    // console.log(tempJsonData[key]);
    tempJsonData[key].forEach((item: { [x: string]: string | number; }) => {
      //然后去遍历这个对象数组
      if (temp.includes(item["配置"])) {
        // console.log(newJsonData[key][item["配置"]]);
        // console.log(item);
        if (
          Number(newJsonData[key][item["配置"]]["价格"]) <
          Number(item["价格"]) //把newJsonData中对应的参数转换为number类型进行比较
        ) {
          newJsonData[key][item["配置"]] = item; //为真时 就执行这段代码
        }
      } else {
        //否则 temp这个空数组就加入item['配置']
        temp.push(item["配置"]);
        newJsonData[key][item["配置"]] = item;
      }
    });
  });

  console.log(newJsonData);

  // 改变数组的内容，只输出需要的数据
  Object.keys(newJsonData).forEach((key) => {
    jsonData[key] = []; //创建一个新数组
    Object.keys(newJsonData[key]).forEach((k) => {
      const el = newJsonData[key][k];
      // console.log(el);
      // 将识别错误的修正
      if (el["型号"].includes("iPhone")) {
        el["型号"] = el["型号"].replace("iPhone", "").toLowerCase(); //replace用于在将iPhone替换成一个空字符
      }
      const item = {
        型号: el["型号"],
        价格: el["价格"],
        容量: el["配置"].replace("G", ""), //这里将G替换为空字符
      };
      jsonData[key].push(item); //这里的作用就是将item对象数组变成 数组
      // console.log(jsonData[key]);
      //此时的jsonDate[key]空数组添加item数组
    });
  });

  // 获取json数据
  const res = await fetch(
    //fetch返回一个promise对象
    `http://xcs.whxcs.com:8088/yiping_json/sj_苹果.json`
  );
  // console.log(res);
  if (res.status === 200) {
    const temp = await res.json(); //获取json数据时 必要的做异步请求方法 创建一个变量去赋值到res.json()数据

    console.log(temp);

    const newTemp: any = {}; //创建的空数组
    for (const key in temp) {
      newTemp[`iPhone ${key}`] = temp[key]; //将temp的每个key名 赋值给newTemp新数组的key名 且在key名前加iPhone
    }
    console.log(jsonData); //后面又需要添加的全新价格的数据
    // console.log(newTemp); //原有的比较全的数据
    Object.keys(jsonData).forEach((key) => {
      Object.keys(newTemp).forEach((k) => {
        if (
          key.replace(/(\s+)/g, "").toLowerCase() === //将jsonData的每个key名的空格替换掉 并且小写所以字符与 k的每个key名同样操作 比较相等时
          k.replace(/(\s+)/g, "").toLowerCase()
        ) {
          //因为这里的newTemp[k]是数组 所以需要去拿它的key值
          //这里的数据是newTemp和jsonData key名相同的数据
          // 这里的jsonData[key]是由全新价的数组
          for (const old_item of newTemp[k]) {  //将遍历的是原长数组，需要将全新价插入，然后返回新数组
            for (const new_item of jsonData[key]) {
              // 将jsonData[key]有全新价数组的 key值一一遍历出来
              if (new_item['容量'].includes('B')) {
                new_item['容量'] = new_item['容量'].replace('B', '')
              }
              if (old_item["容量"] == new_item["容量"]) {
                //如果
                old_item["全新"] = new_item["价格"];  //创建加赋值 在old_item就是原长数据中创建一个key名为'全新'，然后等于全新价中的价格，这样就完成了在原长数组中创建key名，并给值
                // console.log(old_item);  这里是遍历出来的有全新价的数组
              }
            }
          }
        }
      });
    });
    //这里就是加入全新数据的原数组数据
    console.log(newTemp);


    // 将原数组的数据进行排序渲染到页面中
    const paixu = [
      "15",
      "15plus",
      "15pro",
      "15promax",
      "14",
      "14plus",
      "14pro",
      "14promax",
      "13",
      "13mini",
      "13pro",
      "13promax",
      "12",
      "12mini",
      "12pro",
      "12promax",
      "11",
      "11pro",
      "11promax",
      "x",
      "xr",
      "xs",
      "xsmax",
      "8",
      "8p",
      "7",
      "7p",
      "se2",
      "se3",
      "6s",
      "6sp",
    ];

    // 分类
    const iphone: any = {
      15: [],
      14: [],
      13: [],
      12: [],
      11: [],
      x: [],
    };

    // 用找newTemp的每个key名
    //此方法等同于for( in ),就是去获取数组的每个key名
    Object.keys(newTemp).forEach((key: any) => {
      //然后在遍历iphone数组中的每个key名
      Object.keys(iphone).forEach((k) => {
        if (
          (key.includes(`${k}`) && k != "x") || //在key中找到iphone数组的key名的话 加上 key名不等于x
          //单竖杆就是 换成二进制的相加之后的结果，\s就是匹配空格 \s+就是匹配所有空格
          (key.replace(/(iPhone|\s+)/g, "")[0] == "x" && k == "x") //或者 将newTemp的key名中通过正则表达式全局找到iPhone | 全部的空白字符集都切换为空值 等于x 与 k名等于 x
        ) {
          iphone[k].push(newTemp[key]); //将newTemp[key] 添加到iphone[k]数组中
          // console.log(iphone[k]);
        }
      });
    });

    // 排除iPhone中为空的数组
    for (const key in iphone) {
      if (iphone[key].length === 0) {
        //如果iphone数组中又key名的长度为0时 就是为空的时候 就删除这个key名数据
        delete iphone[key];
      }
    }

    // 创建一个空数组
    const arr: any[] = [];
    // 遍历paixu的数组
    paixu.forEach((key) => {
      //在遍历iphone中的每个key名 为k
      for (const k in iphone) {
        if (k.replace(/(iPhone|\s+)/g, "") === key) {
          //k全局去找到iPhone或所有的空字符 替换为'' 并且等于key值时
          arr.push(iphone[k]);
        }
      }
    });

    // 按照给定的iphone顺序来排序
    for (let i = 0; i < arr.length; i++) {
      const items = arr[i]; //这里是遍历出的全部arr的数据
      const temp: any[] = [];
      paixu.forEach((k) => {
        for (const item of items) {
          if (
            k.replace(/(iPhone|\s+)/g, "") ===
            item[0]["型号"].replace(/(\s+)/g, "").toLowerCase()
          ) {
            temp.push(item);
          }
        }
      });
      // structuredClone vue的深拷贝方法
      arr[i] = structuredClone(temp);
    }
    //这就是在原数组中 找到需要展示的数组并且加入了全新价 然后按顺序来排列出来
    return arr
  }
}

//nextTick是用来在vue.js中常见的一种异步更新DOM的机制
const nlist = ref<Record<string, any>[]>([])
nextTick(async () => {
  nlist.value = [];
  const arrList: any = await getJson()
  // console.log(arrList);
  for (const frist of arrList) {
    for (const towch of frist) {
      // console.log(towch);
      const newarr: any[] = []
      for (const stree of towch) {
        // console.log(stree);
        if (stree['型号'].includes('15')) {
          newarr.push(stree)
          // console.log(newarr);
        }
      }
      if (newarr.length === 0) {
        continue
      }
      nlist.value.push(newarr);

    }
  }
})


</script>

<style>
.matter {
  width: 90%;
  border: 2px solid #006246;
  border-radius: 5px;
  margin: 0 auto;
  padding: 3px;
  position: relative;
}

.matter::before {
  content: '';
  width: 10px;
  height: 10px;
  background-color: #006246;
  position: absolute;
  bottom: 3px;
  right: 3px;
  border-radius: 0 5px 5px 5px;
}

.pageTitle {
  width: 100%;
  height: 20px;
  background-color: #006246;
  display: flex;
  align-items: center;
  border-radius: 5px 5px 0 5px;

  span {
    margin-left: 8%;
    color: #ffffff;
    font-weight: normal;
    font-size: 16px;
  }
}

.c {
  width: 100%;
  display: flex;
  flex-direction: row;

  >span:nth-child(1) {
    display: flex;
    width: 23%;
    justify-content: center;
    font-size: 14px;
  }

  >span:nth-child(2) {
    display: flex;
    width: 23%;
    justify-content: center;
    font-size: 14px;
  }

  >span:nth-child(3) {
    display: flex;
    width: 31%;
    justify-content: center;
    font-size: 14px;
  }

  >span:nth-child(4) {
    display: flex;
    width: 23%;
    justify-content: center;
    font-size: 14px;
  }
}

.cbig {
  display: flex;

  .c1 {
    display: flex;
    flex-direction: column;
    width: 23%;
    align-items: center;

    >span {
      font-size: 14px;
      font-weight: normal;
    }
  }

  .c2 {
    display: flex;
    flex-direction: column;
    width: 23%;
    align-items: center;

    >span {
      font-size: 14px;
      font-weight: normal;
    }
  }

  .c3 {
    display: flex;
    flex-direction: column;
    width: 31%;
    align-items: center;

    >span {
      font-size: 14px;
      font-weight: normal;
    }
  }

  .c4 {
    display: flex;
    flex-direction: column;
    width: 23%;
    align-items: center;

    >span {
      font-size: 14px;
      font-weight: normal;
    }
  }
}
</style>